<template>
  <div class="addSupplier">

    <div class="header">
      <el-row>
        <el-col :span="22">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item separator-class="el-icon-arrow-right">首页</el-breadcrumb-item>
            <el-breadcrumb-item>新增供应商</el-breadcrumb-item>
          </el-breadcrumb>

        </el-col>
        <el-col :span="2">
          <el-button type="success" size="mini" @click="cancel">返回</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="content" style="width: 50%;margin-top: 40px;" v-loading.fullscreen.lock="loadingfile" element-loading-text="正在系统认证..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 1)">
      <el-form :model="addUserFrom" :rules="rules" ref="form" label-width="140px">
        <el-form-item label="单位名称:" prop="supplierName">
          <el-input v-model="addUserFrom.supplierName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="pwd">
          <el-input v-model="addUserFrom.pwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码:" >
          <el-input v-model="addUserFrom.tel" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="银行卡号:" prop="scheduleAuditingCode">
          <el-input v-model="addUserFrom.scheduleAuditingCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址:" prop="address">
          <el-input v-model="addUserFrom.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人:" >
          <el-input v-model="addUserFrom.emergencyContact" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人电话:">
          <el-input v-model="addUserFrom.emergencyContactTel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="负责人:" prop="guaranteeContact">
          <el-input v-model="addUserFrom.guaranteeContact" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话:" prop="guaranteeContactTel">
          <el-input v-model="addUserFrom.guaranteeContactTel" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="银行卡户名:" prop="qualifications">
          <el-input v-model="addUserFrom.qualifications" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="社会统一信用代码:" >
          <el-input v-model="addUserFrom.taxCode" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="上传证件:" style="width: 50vw">
          <div class="uploadImage">
            <label class="back" v-loading.fullscreen.lock="loading" :element-loading-text="loadinginfo" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
              <div v-if="addUserFrom.idCardBack==''">
                <div class="el-icon-folder-add"></div>
                上传身份证
              </div>
              <input class="login-input" type="file" accept="image/*" @change="uploadImage($event,'back')" style="display: none">
              <img :src="addUserFrom.idCardBack" alt="" v-if="addUserFrom.idCardBack!=''">
            </label>
            <label class="back" v-loading.fullscreen.lock="loading" :element-loading-text="loadinginfo" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
              <div v-if="addUserFrom.idCardFront==''">
                <div class="el-icon-folder-add"></div>
                上传身份证正面
              </div>
              <input class="login-input" type="file" accept="image/*" @change="uploadImage($event,'Frbont')" style="display: none">
              <img :src="addUserFrom.idCardFront" alt="" v-if="addUserFrom.idCardFront!=''">
            </label>
            <label class="back" v-loading.fullscreen.lock="loading" :element-loading-text="loadinginfo" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
              <div v-if="addUserFrom.backCardImage==''">
                <div class="el-icon-folder-add"></div>
                上传银行卡
              </div>
              <input class="login-input" type="file" accept="image/*" @change="uploadImage($event,'backCardImage')" style="display: none">
              <img :src="addUserFrom.backCardImage" alt="" v-if="addUserFrom.backCardImage!=''">
            </label>
          </div>
        </el-form-item>
      </el-form>
      <div style="text-align: right;">
        <el-button @click="cancel">返回</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>

    </div>
  </div>
</template>

<script>
import { addSupplier } from "../../network/supplier";
import { upload } from "../../network/job";

export default {
  name: "addSupplier",
  data() {
    return {
      loading: false,
      loadingfile: false,
      loadinginfo: "",
      dialogImageUrl: "",
      rules: {
        supplierName: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        // emergencyContact: [
        //   { required: true, message: "请输入紧急联系人", trigger: "blur" },
        // ],
        // emergencyContactTel: [
        //   { required: true, message: "紧急联系人电话", trigger: "blur" },
        //   {
        //     min: 11,
        //     max: 11,
        //     message: "请输入正确的手机号码",
        //     trigger: "blur",
        //   },
        // ],
        guaranteeContact: [
          { required: true, message: "请输入负责人", trigger: "blur" },
        ],
        guaranteeContactTel: [
          { required: true, message: "请输入负责人电话", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        idCardBack: [
          { required: true, message: "请输入身份证反面", trigger: "blur" },
        ],
        idCardFront: [
          { required: true, message: "请输入身份证正面", trigger: "blur" },
        ],
        qualifications: [
          { required: true, message: "请输入银行卡户名", trigger: "blur" },
        ],
        taxCode: [
          {
            required: true,
            message: "请输入社会统一信用代码",
            trigger: "blur",
          },
        ],
        tel: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        scheduleAuditingCode: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
        ],
      },
      addUserFrom: {
        idCardFront: "",
        idCardBack: "",
        backCardImage: "",
      },
    };
  },
  methods: {
    cancel() {
      this.$router.back();
    },

    uploadImage(e, params) {
      let file = e.target.files[0];
      this.file(file, params);
    },
    file(e, params) {
      this.loading = true;
      this.loadinginfo = "正在上传图片,请稍等....";
      let file = new FormData();
      file.append("img", e);
      upload(file).then((v) => {
        if (v.code == 200) {
          let { data } = v;
          this.loadinginfo = "上传完成....";
          console.log();
          params == "back"
            ? (this.addUserFrom.idCardBack = data)
            : params == "Frbont"
            ? (this.addUserFrom.idCardFront = data)
            : (this.addUserFrom.backCardImage = data);
          console.log(this.addUserFrom);
        } else {
          this.$message.error("上传图片失败");
        }
        setTimeout(() => {
          this.loading = false;
        }, 200);
      });
    },
    confirm() {
      this.$refs.form.validate(async (v) => {
        if (!v) return;

        if (!this.addUserFrom.update) {
          this.loadingfile = true;
          let status = await addSupplier(this.addUserFrom);
          if (status.code == 200) {
            this.$success("添加供应商成功！");
            this.$router.back();
            this.$refs.form.resetFields();
          } else {
            this.$error(status.msg);
          }
          this.loadingfile = false;
        } else {
          this.$message.success("修改暂未开放");
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.uploadImage {
  display: flex;
  justify-content: space-between;
}
.back {
  border-radius: 20px;
  display: inline-block;
  height: 200px;
  display: flex;
  &:hover {
    cursor: pointer;
  }
  img {
    width: 100%;
    height: 100%;
  }

  align-items: center;
  text-align: center;
  justify-content: center;
  width: 200px;
  background-color: #f3f3f3;
  .el-icon-folder-add {
    font-size: 40px;
  }
}
</style>